<style>
  input.ng-invalid.ng-dirty {
    background-color: #FFC0CB;
  }

  input.ng-valid.ng-dirty {
    background-color: #78FA89;
  }
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    用户信息
  </h1>
  <ol class="breadcrumb">
    <li><a href="#/index"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">用户信息</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <div class="row">
    <div class="col-md-3">

      <!-- Profile Image -->
      <div class="box box-primary">
        <div class="box-body box-profile">
          <img class="profile-user-img img-responsive img-circle"
               src="/cmsys/bower_components/AdminLTE/dist/img/user1-128x128.jpg"
               alt="用户头像">

          <h3 class="profile-username text-center">{{user.username}}</h3>

          <p class="text-muted text-center">{{user.role}}</p>

          <ul class="list-group list-group-unbordered">
            <li class="list-group-item">
              <b>真是名称</b> <a class="pull-right">{{user.realname}}</a>
            </li>
            <li class="list-group-item">
              <b>邮箱</b> <a class="pull-right">{{user.email}}</a>
            </li>
          </ul>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->

      <!-- About Me Box -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">关于我</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <strong><i class="fa fa-book margin-r-5"></i> 单位</strong>

          <p class="text-muted pull-right">
            {{user.companyName}}
          </p>

          <hr>

          <strong><i class="fa fa-map-marker margin-r-5"></i> 地址</strong>

          <p class="text-muted pull-right">{{user.address}}</p>


        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    <div class="col-md-9">
      <!--<uib-tabset active="active">-->
      <!--<uib-tab index="0" heading="Static title">Static content</uib-tab>-->
      <!--<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"-->
      <!--disable="tab.disabled">-->
      <!--{{tab.content}}-->
      <!--</uib-tab>-->
      <!--<uib-tab index="3" select="alertMe()">-->
      <!--<uib-tab-heading>-->
      <!--<i class="glyphicon glyphicon-bell"></i> Alert!-->
      <!--</uib-tab-heading>-->
      <!--I've got an HTML heading, and a select callback. Pretty cool!-->
      <!--</uib-tab>-->
      <!--</uib-tabset>-->
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#activity" data-toggle="tab">修改个人信息</a></li>
          <li><a href="#settings" data-toggle="tab">修改密码</a></li>
        </ul>
        <div class="tab-content">
          <div class="active tab-pane" id="activity">
            <form class="form-horizontal" novalidate name="form1">
              <div class="form-group">
                <label for="inputName" class="col-sm-2 control-label">用户名</label>

                <div class="col-sm-10">
                  <input type="text" name="username" ng-model="user1.username" class="form-control"
                         id="inputName" placeholder="用户名不能有特殊字符" required ajax-check="username">
                </div>
              </div>
              <div style="color:red;" class="col-sm-offset-2 col-sm-10"
                   ng-show="form1.username.$error.invalid">用户名已存在！！
              </div>
              <div class="form-group">
                <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>

                <div class="col-sm-10">
                  <input type="email" name="email" ng-model="user1.email" class="form-control"
                         id="inputEmail" placeholder="邮箱">
                </div>
                <span style="color:red" ng-show="form1.email.$dirty && form1.email.$invalid">
											<span ng-show="form1.email.$error.email">邮箱格式不正确！！</span>
                </span>
              </div>
              <div class="form-group">
                <label for="inputRealName" class="col-sm-2 control-label">真实名称</label>

                <div class="col-sm-10">
                  <input type="text" name="realname" ng-model="user1.realname" class="form-control"
                         id="inputRealName" placeholder="真实名称">
                </div>
              </div>
              <div class="form-group">
                <label for="inputAddress" class="col-sm-2 control-label">地址</label>
                <div class="col-sm-10">
                  <input type="text" name="address" ng-model="user1.address" class="form-control"
                         id="inputAddress"
                         placeholder="地址">
                </div>
              </div>
              <div class="form-group">
                <label for="inputCompany" class="col-sm-2 control-label">公司</label>
                <div class="col-sm-10">
                  <select id="inputCompany"
                          name="company" ng-model="user1.cid">
                    <option ng-repeat="company in companies" value="{{company.cid}}">
                      {{company.cname}}
                    </option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                  <button class="btn btn-danger" ng-disabled="!form1.$valid" ng-click="updateUser();">
                    修改
                  </button>
                </div>
                <div class="col-sm-4">
                  <small class="text-muted text-center bg-aqua "> 修改成功后，信息将在下次登陆更新。</small>
                </div>

              </div>
            </form>

          </div>
          <div class="tab-pane" id="settings">
            <form class="form-horizontal" novalidate name="form2">
              <div class="form-group">
                <label for="password" class="col-sm-2 control-label">原密码</label>

                <div class="col-sm-10">
                  <input type="password" ajax-check ng-model="pwdUser.password"
                         class="form-control" id="password" name="password"
                         placeholder="原密码" required>
                </div>
              </div>
              <div style="color:red;" class="col-sm-offset-2 col-sm-10"
                   ng-show="form2.password.$error.invalid">输入密码有误！！
              </div>
              <div class="form-group">
                <label for="password1" class="col-sm-2 control-label">新密码</label>

                <div class="col-sm-10">
                  <input type="password" class="form-control" id="password1" required name="password1"
                         placeholder="新密码/8位以上" ng-minlength="8" ng-model="pwdUser.password1">
                </div>
                <div style="color:red;" class="col-sm-offset-2 col-sm-10"
                     ng-show="form2.password1.$error.minlength">密码为八位以上
                </div>
              </div>
              <div class="form-group">
                <label for="password2" class="col-sm-2 control-label">再输入一次</label>

                <div class="col-sm-10">
                  <input type="password" class="form-control" same-to="password1"
                         id="password2" required name="password2" ng-minlength="8"
                         placeholder="新密码/8位以上" ng-model="pwdUser.password2">
                </div>
              </div>
              <div style="color:red;" class="col-sm-offset-2 col-sm-10"
                   ng-show="form2.password2.$error.inconsistent">两次输入不一致
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                  <button class="btn btn-danger" ng-disabled="!form2.$valid" ng-click="editPwd();">
                    修改密码
                  </button>
                </div>
                <div class="col-sm-5">
                  <small class="text-muted text-center bg-aqua ">修改成功后，信息将在下次登陆更新。</small>
                </div>
              </div>
            </form>
          </div>
          <!-- /.tab-pane -->
        </div>
        <!-- /.tab-content -->
      </div>
      <!-- /.nav-tabs-custom -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->

</section>
<!-- /.content -->
<!-- /.content-wrapper -->

<!-- Control Sidebar -->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
     immediately after the control sidebar -->
<!-- ./wrapper -->

